<template>
  <div class="ConfirmPlayOrder" :style="{minHeight:$store.state.minHeight+'rem'}">
    <myHead title="确认订单"></myHead>
    <div class="content">
      <div class="txt">
        <p>姓&emsp;名</p>
        <input type="text" placeholder="请输入身份证上的姓名">
      </div>
      <div class="txt">
        <p>手机号</p>
        <input type="text" placeholder="请输入手机号">
      </div>
    </div>
    <div class="info">
      <div class="info_top">
          <div class="info_img"><img src="../../../static/img/bannerwanle.png" alt=""></div>
          <div class="info_msg">
            <p class="info_tit">马来西亚英女皇钟楼七日游(含门票 索道、摆渡车)</p>
            <div class="info_money"><p>1999元/张</p><p>×1</p></div>
            <p class="info_money1">规格：1999元七日游</p>
          </div>
      </div>
      <p class="info_ts">注：请于当日13点前消费，当日13点前均可下单</p>
    </div>
    <div class="shopMoney">
      <div class="txt1">
        <p>商品金额</p>
        <p>￥1999</p>
      </div>
      <div class="item-1">
        <div><span>优惠券</span></div>
        <div @click="jump('playCoupon')"><span>暂未使用</span> <img src="../../../static/img/yjt1.png" alt=""></div>
      </div>
      <div class="mjly">
        <p>买家留言：</p>
        <textarea name="" id=""  placeholder="请输入买家留言"></textarea>
      </div>
    </div>
    <footer>
      <div class="ft_left">合计:&emsp;<span style="color: #FF6262">￥1999</span></div>
      <div class="btn" @click="show=true">去支付</div>
    </footer>
    <van-dialog v-model="show" :show-cancel-button="false" confirm-button-text="知道啦" width="3rem" :close-on-click-overlay="true">
        <div class="tc_wrap">
            <div class="tc_tit">支付成功</div>
            <img src="../../../static/img/duihao@2x.png" alt="">
            <div class="tc_btn" @click="jump('PlayOrderDetails')">查看订单</div>
            <div class="tc_msg">此次支付获得50积分</div>
        </div>
    </van-dialog>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";
  export default {
    name: "ConfirmPlayOrder",
    components:{
      myHead
    },
    data(){
      return {
        show:false
      }
    },
    methods:{
      jump(page){
        this.$router.push({
          name:page
        })
      }
    }
  }
</script>

<style scoped>
  .ConfirmPlayOrder {
    width: 100%;
    box-sizing: border-box;
    padding-top: .5rem;
    background-color: #F0F0F0;
  }
  .content {
    padding: 0 .15rem;
    background-color: #FFFFFF;
    margin-bottom: .1rem;
  }
  .txt,.txt1 {
    height: .5rem;
    box-sizing: border-box;
    display: flex;
    flex-flow: row;
    align-items: center;
    border-bottom: .01rem solid #F0F0F0;
  }
  .txt:nth-last-child(1) {
    border-bottom: none;
  }
  .txt>p,.txt1>p {
    width: .5rem;
    text-align: center;
    margin-right: .2rem;
  }
  .txt1>p:nth-child(1) {
    width: 1rem;
    text-align: left;
  }
  .txt>p:nth-child(1),.txt1>p,.mjly>p {
    font-size:.16rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .txt>input {
    width: 2rem;
    font-size:.16rem;
    font-family:PingFang SC;
    font-weight:500;
    border: none;
    outline: none;
  }

  .info {
    padding: .15rem;
    background-color: #FFFFFF;
    margin-bottom: .1rem;
  }
  .info_top {
    height: 1.1rem;
    display: flex;
    flex-flow: row;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: .1rem;
  }
  .info_img {
    width: 1.1rem;
    height: 1.1rem;
    margin-right: .15rem;
  }
  .info_img>img {
    width: 100%;
    height: 100%;
  }
  .info_msg {
    width: calc(100% - 1.3rem);
    height: 100%;
    box-sizing: border-box;
    padding: .05rem 0;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .info_tit {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(32,32,32,1);
    line-height:.24rem;
  }
  .info_money {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .info_money>p:nth-child(1),.info_money1 {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
  }
  .info_money>p:nth-child(2) {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .info_ts {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #FF6262;
  }
  .shopMoney {
    background-color: #FFFFFF;
    padding: 0 .1rem;
  }
  .txt1 {
    justify-content: space-between;
  }

  .item-1{
    width: 100%;
    height: .5rem;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: .01rem solid #F0F0F0;
  }
  .item-1>div:nth-child(1) {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .item-1>div {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #2D2C2C;
  }
  .item-1>div:nth-child(2)>img {
    width: .05rem;
    height: .1rem;
    margin-left: .1rem;
  }
  .mjly {
    height: 1rem;
    display: flex;
    flex-flow: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: .1rem;
  }
  .mjly>textarea {
    width: 2.1rem;
    height: 80%;
    resize: none;
    outline: none;
    border: none;
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
  }

  footer {
    width: 100%;
    height: .5rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    background-color: #FFFFFF;
    left: 0;
    bottom: 0;
  }
  .ft_left {
    height: 100%;
    width: calc(100% - 1.65rem);
    box-sizing: border-box;
    text-align: right;
    padding-right: .2rem;
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:400;
    line-height: .5rem;
  }
  .btn {
    width:1.65rem;
    height:100%;
    min-height: .5rem;
    background:linear-gradient(90deg,rgba(255,142,65,1) 0%,rgba(255,110,0,1) 100%);
    font-size:.15rem;
    font-family:Adobe Heiti Std;
    font-weight:normal;
    color: #FFFFFF;
    text-align: center;
    line-height: .5rem;
  }

  .tc_wrap {
    padding: .25rem 0;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    align-items: center;
  }
  .tc_tit {
    height: .5rem;
    font-size:.2rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #141414;
    line-height: .5rem;
  }
  .tc_wrap>img {
    width: 1.32rem;
    height: .74rem;
    margin: .2rem 0;
  }
  .tc_btn {
    width:1.92rem;
    height:.35rem;
    background:linear-gradient(0deg,rgba(255,142,65,1),rgba(255,110,0,1));
    box-shadow:0 .06rem .11rem 0 rgba(255,118,17,0.4);
    border-radius:.17rem;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #FFFFFF;
    text-align: center;
    line-height: .35rem;
    margin-bottom: .15rem;
  }
  .tc_msg {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #999999;
  }

/* 弹窗适配 */
  >>> .van-button--large {
    height: .5rem;
    line-height: .48rem;
  }
  >>> .van-button {
    font-size: .16rem;
    border-radius: .02rem;
  }
  >>> .van-dialog {
    border-radius: .16rem;
  }
</style>
